const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  // entry: {
  //   main: './src/main.js',
  //   // A: './src/module/A.js'
  // },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name]-[chunkhash:6].js",
  },
  resolve: {
    /**
     * 由于 node 查找npm包的规则 会先在本地目录寻找包，如果没有就一层一层往上找，直到找到头
     *  如果包很多切目录很深 这个也是会消耗一些时间的，所以可以通过配置 resolve.modules 锁死寻找包的路径，如这里只会寻找当前项目下node_modules
     *  如果没找到就不会往上找了 就会直接报错
     */
    modules: [path.resolve(__dirname, "./node_modules")],
    /**
     * 在webpack模块导入导出时默是只认识.js和.json文件，原因就在这里，当我们没写后缀的时候webpack会尝试使用这个字段下值取匹配看看能不能匹配的上
     *  所以这个匹配也是需要一点时间的。也算一个优化点
     *
     * 官方建议：
     *  extensions 这个数组 越小越好
     *  尽量自己手动的写上后缀名
     */
    extensions: [".js", ".json", ".jsx", ".ts"],
  },
  resolveLoader: {
    modules: ["node_modules", "./myLoaders"],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "./src"),
        // exclude: ["node_modules"],
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        include: path.resolve(__dirname, "./src"),
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        // loader: 'file-loader',
        loader: "url-loader",
        include: path.resolve(__dirname, "./src"),
        options: {
          name: "[name]-[hash:6].[ext]",
          publicPath: "../images",
          outputPath: "images",
          limit: 1024 * 50, //1024等于1K  这里显示的是50k
        },
      },
      {
        test: /\.(woff|woff2|svg|eot)$/,
        loader: "file-loader",
        include: path.resolve(__dirname, "./src"),
        options: {
          name: "[name].[ext]",
          publicPath: "../font",
          outputPath: "font",
          // publicPath: '../'
        },
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: "babel-loader",
          options: {
            /*
              使用缓存 "cacheDirectory":true, 这是个构建速度提升的大杀器
                webpack最为核心的就是js文件的打包，node_modules 下那么多的js文件，有时候速度比较慢就是babel-loader执行的比较慢导致的
                配置了之后就会有缓存，当再次编译的时候就会极大的加速

              注意：这个配置项不能写在 .babelrc 文件里面
            */
            cacheDirectory: true,
          },
          // options: {
          //   presets: [
          //     [
          //       "@babel/preset-env",
          //       {
          //         "corejs": 2,
          //         "useBuiltIns": "usage"
          //       }
          //     ]
          //   ]
          //   // presets: ["@babel/preset-env"]
          // }
        },
      },
    ],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
    new CleanWebpackPlugin(),
    new miniCssExtractPlugin({
      filename: "css/[name].css", // [name]是根据入口的占位符生成的
    }),
  ],
  mode: "development",
  devtool: "sourcemap", //定位错误

  devServer: {
    contentBase: "./dist", //这个一般都不会去改的
    port: 666, //服务器端口
    open: true, //自动打开浏览器的窗口
    // 配置代理 处理跨域
    proxy: {
      "/api": {
        target: "http://localhost:777",
      },
    },
  },
};
